<template>
    <div class="m-nav">
        <ul class="nav">
            <li class="list">
                <nuxt-link to="/my">我的美团</nuxt-link>
                <dl>
                    <dd><nuxt-link to="order">我的订单</nuxt-link></dd>
                    <dd><nuxt-link to="order">我的收藏</nuxt-link></dd>
                    <dd><nuxt-link to="order">抵用券</nuxt-link></dd>
                    <dd><nuxt-link to="order">账户设置</nuxt-link></dd>
                </dl>
            </li>
            <li>
                <nuxt-link to="/order">手机App</nuxt-link>
            </li>
            <li class="list bd">
                <nuxt-link to="/center">商家中心</nuxt-link>
                <dl>
                    <dd><nuxt-link to="order">登录商家中心</nuxt-link></dd>
                    <dd><nuxt-link to="order">美团智能收银</nuxt-link></dd>
                    <dd><nuxt-link to="order">我想合作</nuxt-link></dd>
                    <dd><nuxt-link to="order">手机免费开店</nuxt-link></dd>
                    <dd><nuxt-link to="order">餐饮代理商招募</nuxt-link></dd>
                    <dd><nuxt-link to="order">商家申请开票</nuxt-link></dd>
                    <dd><nuxt-link to="order">免费合作美团排队</nuxt-link></dd>
                </dl>
            </li>
            <li class="list site">
                <nuxt-link to="/site">网站导航</nuxt-link>
                <div class="subContainer">
                    <dl class="hotel">
                        <dt>酒店旅游</dt>
                        <dd>国家机票</dd>
                        <dd>火车票</dd>
                        <dd>榛果民宿</dd>
                        <dd>经济型酒店</dd>
                        <dd>主题酒店</dd>
                        <dd>商务酒店</dd>
                        <dd>公寓</dd>
                        <dd>豪华酒店</dd>
                        <dd>客栈</dd>
                        <dd>青年旅社</dd>
                        <dd>度假酒店</dd>
                        <dd>别墅</dd>
                        <dd>农家院</dd>
                    </dl>
                    <dl class="food">
                        <dt>吃美食</dt>
                        <dd>烤鱼</dd>
                        <dd>特色小吃</dd>
                        <dd>烧烤</dd>
                        <dd>自助餐</dd>
                        <dd>火锅</dd>
                        <dd>代金券</dd>
                    </dl>
                    <dl class="movie">
                        <dt>看电影</dt>
                        <dd class="movies">热映电影</dd>
                        <dd class="movies">热门影院</dd>
                        <dd class="movies">热映电影口碑榜</dd>
                        <dd class="movies">最受期待电影</dd>
                        <dd class="movies">国内票行榜</dd>
                        <dd class="movies">北美票行榜</dd>
                        <dd class="movies">电影排行榜</dd>
                    </dl>
                    <dl class="app">
                        <dt>手机应用</dt>
                        <dd>
                            <a href="#">
                                <img src="//s0.meituan.net/bs/fe-web-meituan/e5eeaef/img/appicons/meituan.png" title="美团app" alt="美团app"/>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/waimai.png" title="外卖app" alt="外卖app"/>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="//s0.meituan.net/bs/fe-web-meituan/404d350/img/appicons/zhenguo.png" title="榛果app" alt="榛果app"/>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/dianping.png" title="点评app" alt="点评app"/>
                            </a>
                        </dd>
                        <dd>
                            <a href="#">
                                <img src="//s1.meituan.net/bs/fe-web-meituan/404d350/img/appicons/maoyan.png" title="猫眼app" alt="猫眼app"/>
                            </a>
                        </dd>
                    </dl>
                </div>
            </li>
        </ul>
    </div>
</template>

<style lang="scss">
    .m-nav {
        float: right;
        margin: 0;
        padding: 0;
        z-index: 999;
        .nav {
            list-style: none;
            float: right;
            height: 40px;
            >li {
                float: left;
                width: 78px;
                text-align: center;
                cursor: pointer;
                box-sizing: border-box;
                a {
                    color: #999;
                    &:hover {
                        color: #31BBAC;
                    }
                }
                &.list:hover {
                    border: 1px solid #E5E5E5;
                    border-top: none;
                    >dl {
                        display: block;
                    }
                    .subContainer {
                        display: flex;
                    }
                }
                dl {
                    background: #fff;
                    display: none;
                    z-index: 999;
                    dd {
                        line-height: 35px;
                        &:hover {
                            color: #31BBAC;
                        }
                    }
                }
                &.bd {
                    dl {
                        width: 140%;
                        position: relative;
                        left: -31px;
                        top: -1px;
                        border-top: 1px solid #e5e5e5;
                        border-bottom: 1px solid #e5e5e5 !important;
                        border-left: 1px solid #E5E5E5;
                        &:before {
                            content: '';
                            background: #fff;
                            display: block;
                            height: 4px;
                            width: 76px;
                            position: absolute;
                            top: -1px;
                            right: 0;
                        }
                    }
                }
                &.site {
                    &:hover {
                        border-bottom: none;
                    }
                }
                .subContainer {
                    box-sizing: border-box;
                    background: #fff;
                    width: 1250px;
                    padding: 30px 36px 36px 47px;
                    position: relative;
                    left: -1175px;
                    z-index: 999;
                    text-align: left;
                    border: 1px solid #e5e5e5;
                    display: none;
                    &:before {
                        content: '';
                        display: block;
                        width: 76px;
                        height: 4px;
                        background: #fff;
                        position: absolute;
                        top: -1px;
                        right: 0;
                    }
                    >dl {
                        text-align: center;
                        box-sizing: border-box;
                        display: inline-block !important;
                        margin-right: 47px;
                        dt {
                            color: #31BBAC;
                            font-size: 14px;
                            margin-bottom: 26px;
                            text-align: center;
                        }
                        dd {
                            width: 70px;
                            display: inline-block;
                            text-align: center;
                            height: 20px;
                            line-height: 20px;
                            margin-bottom: 0;
                        }
                        &.hotel {
                            width: 234px;
                        }
                        &.food {
                            width: 156px;
                        }
                        &.movie {
                            width: 90px;
                            .movies {
                                width: 100% !important;
                            }
                        }
                        &.app {
                            width: 380px;
                            flex: 1;
                            text-align: center;
                            dd {
                                width: 60px;
                                height: 73px;
                                line-height: 73px;
                                text-align: center;
                                margin: 0 8px;
                                img {
                                    width: 60px;
                                    height: 60px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>

